<template>
  <div class="table-box">
    <div class="tools" v-if="toolsConfig">
      <div class="tools__search" v-if="toolsConfig.includes('search')">
        <span>Filter:</span>
        <el-input v-model="searVal" placeholder="请输入">
          <i slot="suffix" class="el-icon-search"></i>
        </el-input>
      </div>
      <div class="tools__opt">
        <el-button-group>
          <el-button
            plain
            id="copy"
            @click="copy"
            v-if="toolsConfig.includes('copy')"
            data-clipboard-target="#sec-table"
            >Copy</el-button
          >
          <el-button v-if="toolsConfig.includes('excel')" plain @click="exportTabels">Excel</el-button>
          <el-popover v-if="toolsConfig.includes('dynamicColumn')" placement="bottom" width="100" trigger="click">
            <el-checkbox-group
              class="checkbox-table-col"
              v-model="checkedTableCol"
              style="padding: 10px; padding-top: 0px"
            >
              <el-checkbox
                style="display: inline-block; margin-top: 15px"
                v-for="item in this.tableCol"
                :label="item.prop"
                :key="item.prop"
              >
                {{ item.label }}
              </el-checkbox>
            </el-checkbox-group>
            <el-button slot="reference" plain icon="el-icon-s-operation"></el-button>
          </el-popover>
        </el-button-group>
      </div>
    </div>
    <!-- 导出全部表格使用 -->
    <el-table style="display: none" :data="tableData" id="out-table">
      <template v-for="item in tableHead || tableCol || []">
        <el-table-column :prop="item.prop" :label="item.label" :fixed="item.fixed" :key="item.value"></el-table-column>
      </template>
    </el-table>
    <el-table
      id="sec-table"
      ref="multipleTable"
      :data="sliceTableData || tableData"
      :height="height"
      :max-height="maxHeight"
      :stripe="stripe"
      :border="border"
      :size="size"
      :fit="fit"
      :show-header="showHeader"
      :highlight-current-row="highlightCurrentRow"
      :current-row-key="currentRowKey"
      :row-class-name="rowClassName"
      :row-style="rowStyle"
      :cell-class-name="cellClassName"
      :header-row-class-name="headerRowClassName"
      :header-row-style="headerRowStyle"
      :cell-style="cellStyle"
      :header-cell-class-name="headerCellClassName"
      :header-cell-style="
        headerCellStyle || {
          background: '#fafafa',
          color: '#333',
          borderBottom: '1px solid #f0f0f0',
        }
      "
      :row-key="rowKey"
      :empty-text="emptyText"
      :default-expand-all="defaultExpandAll"
      :expand-row-keys="expandRowKeys"
      :default-sort="defaultSort"
      :tooltip-effect="tooltipEffect"
      :show-summary="showSummary"
      :sum-text="sumText"
      :summary-method="summaryMethod"
      :span-method="spanMethod"
      :select-on-indeterminate="selectOnIndeterminate"
      :indent="indent"
      :lazy="lazy"
      :load="load"
      :tree-props="treeProps"
      style="width: 100%"
      v-loading="loading"
      element-loading-background="rgba(255, 255, 255, 0.8)"
      @select="select"
      @select-all="selectAll"
      @selection-change="selectionChange"
      @cell-mouse-enter="cellMouseEnter"
      @cell-click="cellClick"
      @cell-mouse-leave="cellMouseLeave"
      @cell-dblclick="cellDblclick"
      @row-click="rowClick"
      @row-contextmenu="rowContextmenu"
      @row-dblclick="rowDblclick"
      @header-click="headerClick"
      @header-contextmenu="headerContextmenu"
      @filter-change="filterChange"
      @current-change="currentChange"
      @header-dragend="headerDragend"
      :expand-change="expandChange"
      @sort-change="sortChange"
    >
      <el-table-column v-if="selection" type="selection" width="55" :align="align"></el-table-column>

      <!-- 文本数据渲染 -->
      <template v-for="(item, index) in tableHead || tableCol || []">
        <el-table-column
          v-if="
            (slotType.includes(item.columnType) ||
              slotType.includes(item.type) ||
              slotType.includes(colType[item.prop])) &&
            checkedTableCol.indexOf(item.prop) != -1
          "
          :prop="item.field || item.prop"
          :label="item.label"
          :fixed="item.fixed"
          :column-key="item.columnKey"
          :render-header="item.renderHeader"
          :sort-method="item.sortMethod"
          :sort-by="item.sortBy"
          :sort-orders="item.sortOrders"
          :header-align="item.headerAlign"
          :class-name="item.className"
          :label-class-name="item.labelClassName"
          :selectable="item.selectable"
          :reserve-selection="item.reserveSelection"
          :filters="item.filters"
          :filter-placement="item.filterPlacement"
          :filter-method="item.filterMethod"
          :ffilter-multiple="item.filterMultiple"
          :filtered-value="item.filteredValue"
          :key="item.field"
          :width="item.width"
          :align="item.align || align"
          :sortable="item.sortable"
          :resizable="item.resizable"
          :formatter="item.formatter"
          :show-overflow-tooltip="item.showOverflowTooltip"
        >
          <template slot-scope="scope">
            <!-- input输入框组件 type是text/textarea 走这里-->
            <el-input
              v-if="inputType.includes(item.type) || inputType.includes(colType[item.prop])"
              :show-word-limit="item.showWrodLimit"
              :type="item.type || colType[item.prop]"
              :maxlength="item.maxlength || 150"
              :minlength="item.minlength"
              :clearable="item.clearable || true"
              :show-password="item.showPassword"
              :prefix-icon="item.prefixicon"
              :suffix-icon="item.suffixIcon"
              :rows="item.rows"
              :autosize="item.autosize"
              :autocomplete="item.autocomplete"
              :name="item.name"
              :max="item.max"
              :min="item.min"
              :step="item.step"
              :resize="item.resize"
              :autofocus="item.autofocus"
              :form="item.form"
              :tabindex="item.tabindex"
              :validate-event="item.validateEvent"
              :disabled="item.disabled || disabledProp[item.prop] || scope.row.disabled || false"
              :placeholder="item.placeholder || `请输入`"
              v-model="scope.row[item.prop]"
              @focus="item.focus && item.focus($event)"
              @blur="item.blur && item.blur($event)"
              @clear="item.clear && item.clear($event)"
              @change="item.change && item.change($event)"
              @input="item.input && item.input($event)"
            ></el-input>
            <!-- Cascader 级联选择器 -->
            <el-cascader
              v-if="item.type === 'cascader'"
              v-model="scope.row[item.prop]"
              :options="item.option || item.options || item.optionData || optionData[item.prop] || []"
              :props="item.props"
              :size="item.size"
              :placeholder="item.placeholder"
              :disabled="item.disabled || disabledProp[item.prop] || scope.row.disabled"
              :clearable="item.clearable"
              :show-all-levels="item.showAllLevels"
              :collapse-tags="item.collapseTags"
              :separator="item.separator"
              :filterable="item.filterable"
              :filter-method="item.filterMethod"
              :debounce="item.debounce"
              :before-filter="item.beforeFilter"
              :popper-class="item.popperClass"
              @change="item.change && item.change($event)"
              @expand-change="item.expandChange && item.expandChange($event)"
              @blur="item.blur && item.blur($event)"
              @focus="item.focus && item.focus($event)"
              @visible-change="item.visibleChange && item.visibleChange($event)"
              @remove-tag="item.removeTag && item.removeTag($event)"
            >
            </el-cascader>
            <!-- select选择器组件 type是select/option 走这里-->
            <el-select
              v-else-if="selectType.includes(item.type) || selectType.includes(colType[item.prop])"
              v-model="scope.row[item.prop]"
              default-first-option
              :clearable="item.clearable || true"
              :disabled="item.disabled || disabledProp[item.prop] || scope.row.disabled || false"
              :remote="item.remote"
              :allow-create="item.allowCreate"
              :multiple="item.multiple"
              :filterable="item.filterable"
              @visible-change="item.visibleChange && item.visibleChange($event)"
              @remove-tag="item.removeTag && item.removeTag($event)"
              @clear="item.clear && item.clear($event)"
              @blur="item.blur && item.blur($event)"
              @focus="item.focus && item.focus($event)"
              @change="item.change && item.change($event, scope)"
              :remote-method="
                item.remoteMethod ||
                ((query) => {
                  remoteMethod(query, item.prop);
                })
              "
              :placeholder="item.placeholder || `请选择`"
            >
              <el-option
                v-for="(oItem, okey) in item.option || item.options || item.optionData || optionData[item.prop] || []"
                :key="okey"
                :label="(item.optionProps && oItem[item.optionProps.label]) || oItem.label"
                :value="(item.optionProps && oItem[item.optionProps.value]) || oItem.value"
              >
              </el-option>
            </el-select>
            <!-- el-link 组件 target（a标签原生属性target）-->
            <template v-else-if="item.type === 'link'">
              <el-link
                :type="item.linkConfig.type || 'primary'"
                :underline="item.linkConfig.underline"
                :disabled="item.linkConfig.disabled"
                :href="item.linkConfig.href"
                :icon="item.linkConfig.icon"
                :target="item.linkConfig.target"
                @click="item.linkConfig.click && item.linkConfig.click(scope)"
                >{{ scope.row[item.prop] }}</el-link
              >
            </template>
            <!-- 为了实现进度和状态 有一个状态点标识-->
            <template v-else-if="item.type === 'status'">
              <span class="ant-badge ant-badge-status"
                ><span
                  :class="`ant-badge-status-dot ant-badge-status-${
                    (item.statusClass && item.statusClass(scope)) || 'pending'
                  }`"
                ></span
                ><span class="ant-badge-status-text">{{
                  (item.formatter && item.formatter(scope)) || scope.row[item.prop]
                }}</span></span
              >
            </template>
            <!-- 插槽 type是slot 走这里-->
            <slot v-else :name="item.slotName || item.field || item.prop" :data="scope" />
          </template>
          <!-- <template v-slot="scope" v-else>
            <slot :name="item.slotName || item.field || item.prop" :data="scope" />
          </template> -->
        </el-table-column>
        <!-- 操作 type是operation 走这里-->
        <el-table-column
          :width="item.width"
          :label="item.label"
          :fixed="item.fixed || 'right'"
          :align="item.align || align"
          v-else-if="item.type === 'operation' || item.prop === 'operation'"
          :key="index"
        >
          <template v-slot="scope">
            <el-button
              v-for="(child, cIndex) in item.children"
              :icon="child.icon"
              :type="child.type || 'text'"
              :key="cIndex"
              v-show="!(child.hide && child.hide(scope))"
              :disabled="
                child.disabled || item.disabled || (item.disabledIndex && item.disabledIndex.includes(scope.$index))
              "
              :circle="child.circle || item.circle"
              :round="child.round || item.round"
              :plain="child.plain || item.plain"
              @click="child.click && child.click(scope)"
            >
              {{
                (child.titleFunc && child.titleFunc(scope)) ||
                (child.labelFunc && child.labelFunc(scope)) ||
                child.title ||
                child.label
              }}</el-button
            >
          </template>
        </el-table-column>
        <!-- 默认情况 -->
        <el-table-column
          v-else-if="checkedTableCol.indexOf(item.prop) != -1"
          :prop="item.field || item.prop"
          :label="item.label"
          :fixed="item.fixed"
          :column-key="item.columnKey"
          :render-header="item.renderHeader"
          :sort-method="item.sortMethod"
          :sort-by="item.sortBy"
          :sort-orders="item.sortOrders"
          :header-align="item.headerAlign"
          :class-name="item.className"
          :label-class-name="item.labelClassName"
          :selectable="item.selectable"
          :reserve-selection="item.reserveSelection"
          :filters="item.filters"
          :filter-placement="item.filterPlacement"
          :filter-method="item.filterMethod"
          :filter-multiple="item.filterMultiple"
          :filtered-value="item.filteredValue"
          :key="item.field"
          :width="item.width"
          :align="item.align || align"
          :sortable="item.sortable"
          :resizable="item.resizable"
          :formatter="item.formatter"
          :show-overflow-tooltip="item.showOverflowTooltip"
        >
          <template slot="header" v-if="item.filterColumn">
            <span>
              {{ item.label }} &nbsp;
              <el-popover placement="top" width="200" height="200" trigger="hover">
                <span slot="reference">
                  <i style="display: inline-block; padding-top: 5px" class="iconfont"> &#xe74a; </i>
                </span>
                <el-input size="small" v-model="item.searVal" placeholder="请输入"></el-input>
                <div class="el-table-filter__bottom">
                  <button @click="filterTableCol(item)">筛选</button>
                  <button @click="clearSearch(item)">重置</button>
                </div>
              </el-popover>
            </span>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <el-pagination
      @size-change="sizeChange"
      @current-change="currentChange"
      :current-page.sync="page"
      background
      :page-sizes="pageSizes"
      :page-size="pageSize"
      :layout="layout"
      :total="tableLists.length"
    >
    </el-pagination>
  </div>
</template>

<script>
import FileSaver from "file-saver";
import * as XLSX from "xlsx/xlsx.mjs";
import Clipboard from "clipboard";

export default {
  name: "secExtTable",
  components: {},
  props: {
    searchVal: String,
    checkedCol: {
      type: Array,
      default: () => [],
    },
    toolsConfig: {
      type: String,
      default: "search,copy,excel,dynamicColumn",
    },
    border: Boolean,
    height: [String, Number],
    maxHeight: [String, Number],
    stripe: {
      type: Boolean,
      default: false,
    },
    border: {
      type: Boolean,
      default: false,
    },
    size: String,
    fit: {
      type: Boolean,
      default: true,
    },
    showHeader: {
      type: Boolean,
      default: true,
    },
    highlightCurrentRow: {
      type: Boolean,
      default: false,
    },
    rowClassName: Function,
    rowStyle: Function,
    cellStyle: Function,
    headerRowClassName: Function,
    headerRowStyle: Function,
    headerCellClassName: Function,
    headerCellStyle: Function,
    rowKey: Function,
    emptyText: String,
    defaultExpandAll: {
      type: Boolean,
      default: false,
    },
    expandRowKeys: Array,
    defaultSort: Object,
    tooltipEffect: String,
    showSummary: Boolean,
    sumText: String,
    summaryMethod: Function,
    spanMethod: Function,
    selectOnIndeterminate: Boolean,
    indent: Number,
    lazy: Boolean,
    load: Function,
    treeProps: Object,
    currentRowKey: [String, Number],
    cellClassName: Function,
    selection: {
      type: Boolean,
      default: false,
    },
    pagination: {
      type: Object,
      default: () => {
        return null;
      },
    },
    optionData: {
      type: Object,
      default: () => {
        return {};
      },
    },
    disabledProp: {
      //让哪个form表单disabled 例如  disabledProp:{name:true} 让字段为name的表单失效
      type: Object,
      default: () => {
        return {};
      },
    },
    // 行的类型
    colType: {
      type: Object,
      default: () => {
        return {};
      },
    },
    loading: {
      type: Boolean,
      default: false,
    },
    tableData: Array,
    tableCol: Array,
    tableHead: Array,
    align: {
      type: String,
      default: "left",
    },
  },
  data() {
    return {
      checkedTableCol: [],
      page: 1, //初始化显示第一页数据
      pageSize: 10, //默认显示页面数量
      pageSizes: [10, 20, 50], //页面数据数组，展示的选择每页显示个数的选项
      totalSize: 0, //总条数
      currentPage: 1,
      tableLists: [],
      layout: "total ,sizes,prev,pager,next,jumper",
      searVal: "",
      slotType: ["slot", "select", "option", "text", "textarea", "link", "cascader", "status"],
      selectType: ["select", "option"],
      inputType: ["text", "textarea"],
    };
  },
  mounted() {},
  methods: {
    //当用户手动勾选数据行的 Checkbox 时触发的事件
    select(selection, row) {
      this.$emit("select", selection, row);
    },
    //当用户手动勾选全选 Checkbox 时触发的事件
    selectAll(selection) {
      this.$emit("selectAll", selection);
    },
    // 当选择项发生变化时会触发该事件
    selectionChange(selection) {
      this.$emit("selectionChange", selection);
    },
    //当单元格 hover 进入时会触发该事件
    cellMouseEnter(row, column, cell, event) {
      this.$emit("cellMouseEnter", row, column, cell, event);
    },
    //当单元格 hover 退出时会触发该事件
    cellMouseLeave(row, column, cell, event) {
      this.$emit("cellMouseLeave", row, column, cell, event);
    },
    //当某个单元格被点击时会触发该事件
    cellClick(row, column, cell, event) {
      this.$emit("cellClick", row, column, cell, event);
    },
    //当某个单元格被双击击时会触发该事件
    cellDblclick(row, column, event) {
      this.$emit("cellDblclick", row, column, event);
    },
    //当某一行被点击时会触发该事件
    rowClick(row, column, event) {
      this.$emit("rowClick", row, column, event);
    },
    //当某一行被鼠标右键点击时会触发该事件
    rowContextmenu(row, column, event) {
      this.$emit("rowContextmenu", row, column, event);
    },
    //当某一行被双击时会触发该事件
    rowDblclick(row, column, event) {
      this.$emit("rowDblclick", row, column, event);
    },
    //当某一列的表头被点击时会触发该事件
    headerClick(column, event) {
      this.$emit("headerClick", column, event);
    },
    //当某一列的表头被鼠标右键点击时触发该事件
    headerContextmenu(column, event) {
      this.$emit("headerContextmenu", column, event);
    },
    //当表格的排序条件发生变化的时候会触发该事件
    sortChange(column, prop, order) {
      this.$emit("sortChange", { column, prop, order });
    },
    //当表格的筛选条件发生变化的时候会触发该事件，参数的值是一个对象，对象的 key 是 column 的 columnKey，对应的 value 为用户选择的筛选条件的数组。
    filterChange(filters) {
      this.$emit("filterChange", filters);
    },
    //当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight-current-row 属性
    currentChange(currentRow, oldCurrentRow) {
      this.$emit("currentChange", currentRow, oldCurrentRow);
    },
    //当拖动表头改变了列的宽度的时候会触发该事件
    headerDragend(newWidth, oldWidth, column, event) {
      this.$emit("headerDragend", newWidth, oldWidth, column, event);
    },
    //当用户对某一行展开或者关闭的时候会触发该事件（展开行时，回调的第二个参数为 expandedRows；树形表格时第二参数为 expanded）
    expandChange(row, expandedRows) {
      this.$emit("expandChange", row, expandedRows);
    },
    /**
     * @函数功能:currentPage 改变时会触发
     * @参数输入:val:当前页
     * @函数返回:
     */
    currentChange(val) {
      this.page = val;
      this.getTableData();
    },
    /**
     * @函数功能:pageSize 改变时会触发 (选择每页展示多少条触发)
     * @参数输入:val:每页条数
     * @函数返回:
     */
    sizeChange(val) {
      this.pageSize = val;
      this.getTableData();
    },
    //列的搜索暂未实现
    filterTableCol(item) {
      // console.log(item);
      // if (item.searVal) {
      //   this.tableLists = this.sliceTableData.filter((ele) => {
      //     return String(ele[item.prop]).indexOf(item.searVal) > -1;
      //   });
      // } else {
      //   this.tableLists = this.tableData;
      // }
      // this.sliceTableData = this.getTableData();
    },
    //列的搜索重置暂未实现
    clearSearch(item) {
      // item.searVal = "";
      // this.tableLists = this.tableData;
      // this.sliceTableData = this.getTableData();
    },
    /**
     * @函数功能:根据分页 对表格数据进行截取
     * @参数输入:data:Array 表格的数据
     * @函数返回:
     */
    getTableData() {
      let tableLists = this.tableLists || [];
      this.totalSize = tableLists.length;
      return tableLists.slice((this.page - 1) * this.pageSize, this.page * this.pageSize);
    },
    //导出
    exportTabels() {
      this.utils.$confirm({ content: "确定要导出数据吗？" }, () => {
        let xlsxParam = { raw: true };
        let fix = document.querySelector(".el-table__fixed-right");
        // let wb = XLSX.utils.table_to_book(document.querySelector("#out-table"), xlsxParam);
        if (fix) {
          //判断要导出的节点中是否有fixed的表格，如果有，转换excel时先将该dom移除，然后append回去
          var wb = XLSX.utils.table_to_book(document.querySelector("#out-table").removeChild(fix));
          document.querySelector("#out-table").appendChild(fix);
        } else {
          var wb = XLSX.utils.table_to_book(document.querySelector("#out-table"), xlsxParam);
        }
        let wbout = XLSX.write(wb, {
          bookType: "xlsx",
          bookSST: true,
          type: "array",
        });
        try {
          FileSaver.saveAs(
            new Blob([wbout], { type: "application/octet-stream;charset=utf-8" }),
            "审计报告.xlsx", //导出的文件名称
          );
        } catch (e) {
          if (typeof console !== "undefined") {
            console.log(e, wbout);
          }
        }
      });
    },
    //复制
    copy() {
      var that = this;
      let clipboard = new Clipboard("#copy", {
        // container: document.getElementById("modal"),
        text: function (trigger) {
          var tableHeaderTxt = "";
          var tableBodyTxt = "";
          that.tableCol.forEach((item) => {
            tableHeaderTxt += `${item.label}  `;
          });
          that.tableData.forEach((item) => {
            that.tableCol.forEach((ele) => {
              tableBodyTxt += `${item[ele.prop]}  `;
            });
            tableBodyTxt += "\n";
          });
          return `${tableHeaderTxt}\n${tableBodyTxt}`;
        },
        // target: function (trigger) {
        //   console.log(trigger);
        //   return trigger.nextElementSibling;
        // },
      });
      clipboard.on("success", (e) => {
        console.log(this, "复制成功!", "success", e);
        this.$message({
          showClose: true,
          message: "复制成功",
          type: "success",
        });
        e.clearSelection();
        clipboard.destroy();
      });
      clipboard.on("error", (e) => {
        this.$message({
          showClose: true,
          message: "该浏览器不支持自动复制",
          type: "warning",
        });
        console.log(this, "该浏览器不支持自动复制!", "warning", e);
        e.clearSelection();
        clipboard.destroy();
      });
    },
  },
  computed: {
    sliceTableData() {
      let search = this.searVal;
      if (search) {
        // filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
        this.tableLists = this.tableData.filter((dataNews) => {
          // some() 方法用于检测数组中的元素是否满足指定条件;
          return Object.keys(dataNews).some((key) => {
            // indexOf() 返回某个指定的字符在某个字符串中首次出现的位置，如果没有找到就返回-1；
            // 该方法对大小写敏感！所以之前需要toLowerCase()方法将所有查询到内容变为小写。
            return String(dataNews[key]).indexOf(search) > -1;
          });
        });
      } else {
        this.tableLists = this.tableData;
      }
      return this.getTableData();
    },
  },
  watch: {
    searchVal: {
      deep: true,
      immediate: true,
      handler(newVal) {
        this.searVal = newVal;
      },
    },
    tableData: {
      immediate: true,
      deep: true,
      handler(newVal) {
        this.tableLists = newVal;
      },
    },
    checkedCol: {
      deep: true,
      immediate: true,
      handler(newVal) {
        if (newVal.length > 0) {
          this.checkedTableCol = newVal;
        }
      },
    },
    tableCol: {
      immediate: true,
      deep: true,
      handler(newVal) {
        if (this.checkedCol?.length == 0) {
          this.checkedTableCol = [];
          newVal.forEach((element) => {
            this.checkedTableCol.push(element.prop);
          });
        }
      },
    },
  },
};
</script>
<style lang="scss" scoped>
.checkbox-table-col {
  ::v-deep .el-checkbox__input {
    float: left;
    line-height: 22px;
  }
  ::v-deep .el-checkbox__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 120px;
  }
}
.table-col__show {
  .table-col__item {
    line-height: 35px;
    cursor: pointer;
    // text-align: center;
    margin-bottom: 5px;
    &:hover {
      color: #00bdac;
    }
    &.active {
      color: #00bdac;
      // background: #f5f7fa;
    }
    i {
      font-weight: 600;
      margin-right: 20px;
      color: #00bdac;
    }
  }
}
.ant-badge-dot {
  width: 6px;
  height: 6px;
  background: #f5222d;
  border-radius: 100%;
  -webkit-box-shadow: 0 0 0 1px #fff;
  box-shadow: 0 0 0 1px #fff;
}
.ant-badge-status-dot {
  position: relative;
  top: -1px;
  display: inline-block;
  width: 6px;
  height: 6px;
  vertical-align: middle;
  border-radius: 50%;
}

.ant-badge-status-success,
.ant-badge-status-over {
  background-color: #52c41a;
}
.ant-badge-status-pending {
  position: relative;
  background-color: #1890ff;
}
.ant-badge-status-default,
.ant-badge-status-close {
  background-color: #d9d9d9;
}
.ant-badge-status-error {
  background-color: #f5222d;
}
.ant-badge-status-warning {
  background-color: #faad14;
}
.ant-badge-status-pending:after {
  position: absolute;
  top: -1px;
  left: -1px;
  width: 100%;
  height: 100%;
  border: 1px solid #1890ff;
  border-radius: 50%;
  -webkit-animation: antStatusProcessing 1.2s ease-in-out infinite;
  animation: antStatusProcessing 1.2s ease-in-out infinite;
  content: "";
}

@keyframes antStatusProcessing {
  0% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 0.5;
  }

  to {
    -webkit-transform: scale(2.4);
    transform: scale(2.4);
    opacity: 0;
  }
}
.ant-badge-status-text {
  margin-left: 5px;
}
.tools {
  margin-bottom: 15px;
  display: flex;
  justify-content: space-between;
  .tools__search {
    width: 300px;
    span {
      margin-right: 10px;
    }
    .el-input {
      width: 250px;
    }
  }
}
.el-icon-search {
  margin: 10px 5px 0 0;
}
</style>
